<template>
  <div style="width: 100%;text-align: center">
    <h1 style="font-size: 35px;margin-left: 100px">
      超市管理系统
      <span style="font-size: 15px;font-weight: normal;float: right;margin-right: 20px">
        <el-dropdown>
          <el-button>
            {{ username }}<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="OpenPersonage">个人中心</el-dropdown-item>
            <el-dropdown-item @click.native="louOut">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </span>
    </h1>
  </div>
</template>

<script>
export default {
  name: 'headerView',
  data() {
    return {
      username: ''
    }
  },
  methods: {
    // 个人中心
    OpenPersonage() {
      this.$router.push("/MyView")
    },
    // 退出
    louOut() {
      this.$confirm('确定是否退出登录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        localStorage.removeItem('token')
        localStorage.removeItem('username')
        location.href = '/'
      }).catch(() => {
        this.$message.error('已取消~');
      });
    }
  },
  created() {

    this.username = localStorage.getItem("username")

  }
}

</script>

<style>
.el-header {
  padding: 0px;
  margin: 0px;
}
</style>
